<template>
  <div>
    <div class="backg-image">
        <h1>产品服务</h1>
        <h5>模块化多种服务由您选择</h5>
    </div>
    <div class="project-container">
      <Row class="row">
        <Col span="8" class="col">
          <Card style="width:300px">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>权限系统
            </p>
            <a href="javascript:void(0)" slot="extra" @click.prevent="changeLimit">点击购买</a>
            <p>角色管理</p>
            <p>用户管理</p>
            <p>权限管理</p>
            <p>机构管理</p>
          </Card>
        </Col>
        <Col span="8" class="col">
          <Card style="width:300px">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>客户管理系统
            </p>
            <a href="javascript:void(0)" slot="extra" @click.prevent="changeLimit">点击购买</a>
            <p>角色管理</p>
            <p>用户管理</p>
            <p>权限管理</p>
            <p>机构管理</p>
          </Card>
        </Col>
        <Col span="8" class="col">
          <Card style="width:300px">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>ERP系统
            </p>
            <a href="javascript:void(0)" slot="extra" @click.prevent="changeLimit">点击购买</a>
            <p>角色管理</p>
            <p>用户管理</p>
            <p>权限管理</p>
            <p>机构管理</p>
          </Card>
        </Col>
        <Col span="8" class="col">
          <Card style="width:300px">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>ERP系统
            </p>
            <a href="javascript:void(0)" slot="extra" @click.prevent="changeLimit">点击购买</a>
            <p>角色管理</p>
            <p>用户管理</p>
            <p>权限管理</p>
            <p>机构管理</p>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { getProjectList } from "@/api/project";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
      this.getProjects()
  },
  methods: {
    getProjects() {
      getProjectList().then(response => {
        this.list = response.data.items;
      });
    },
    changeLimit(row) {
      debugger;
    }
  }
};
</script>

<style  lang="scss" scoped>
.project-container {
  width: 990px;
  margin: 0 auto;
  .row{
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .col{
      padding-top: 20px;
  }
}
.backg-image{
    width: 100%;
    height: 300px;
    background: #21608c;
    color: aliceblue;
    text-align: center;
    letter-spacing: 10px;
    padding-top: 150px;
}
</style>